<script setup lang="ts">
</script>

<template>
  <view class="notice-container">
    <wd-icon name="sound" size="16px" />
    <view class="notice">
      <view class="scroll-text">
        <slot />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.notice-container {
  display: flex;
  align-items: center;
  background-color: #fffbe8;
  color: #ed6a0c;
  padding: 8rpx 10rpx;
}
.notice {
  flex: 1;
  overflow: hidden;
  margin: 0 10rpx;
}
.scroll-text {
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative; /* 相对定位，以便使用transform */
  animation: scroll-left 10s linear infinite; /* 应用动画 */
}
@keyframes scroll-left {
  from {
    transform: translateX(100%); /* 从右向左移动的起点 */
  }
  to {
    transform: translateX(-100%); /* 完全移出视口 */
  }
}
</style>
